<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>发现</title>
    <link rel="stylesheet" href="../css/find.css">
</head>

<body>
    <header>
        <nav>
            <div class="backBox">
                <a href="../pages/index.html">Back</a>
            </div>
            <div class="titleBox">
                发现
            </div>
            <div class="selectBox">
                <select name="city" id="">
                    <option value="">北京市</option>
                    <option value="">上海市</option>
                    <option value="" selected>广州市</option>
                    <option value="">深圳市</option>
                    <option value="">重庆市</option>
                </select>
                <div class="drapDown"></div>
            </div>
        </nav>
    </header>
    <main>
        <div class="contTop">
            <!-- 搜索盒 -->
            <div class="searchBox">
                <input type="text" placeholder="请输入商品名称">
                <i class="iconfont icon-sousuo"></i>
            </div>
            <!-- 大家都在搜 -->
            <div class="allSearch">
                <p>大家都在搜</p>
                <div class="block">
                    <span>寿司</span>
                    <span>羽毛球</span>
                    <span>火锅</span>
                    <span>游泳馆</span>
                    <span>电影</span>
                    <span>周黑鸭</span>
                    <span>KTV</span>
                    <span>肯德基</span>
                </div>
            </div>
        </div>
        <div class="hotSearch">
            <div class="titleBox">
                <i class="iconfont icon-remen"></i>
                <span>热门搜索</span>
                <span>更多<i class="iconfont icon-xiangyou3"></i></span>
            </div>
            <div class="imgBox">
                <img src="../image/find/热门1.png" alt="">
                <img src="../image/find/热门2.png" alt="">
                <img src="../image/find/热门3.png" alt="">
                <img src="../image/find/热门4.png" alt="">
            </div>
        </div>
        <div class="recomSearch">
            <div class="titleBox">
                <i class="iconfont icon-shoucangjia"></i>
                <span>推荐搜索</span>
                <span>更多<i class="iconfont icon-xiangyou3"></i></span>
            </div>
            <div class="imgBox">
                <img src="../image/find/推荐1.png" alt="">
                <img src="../image/find/推荐2.png" alt="">
                <img src="../image/find/推荐3.png" alt="">
            </div>
        </div>
        <!-- 一个高度和footer一样的盒子 -->
        <div class="empty"></div>
    </main>
    <footer>
        <!-- 底部导航栏 -->
        <ul>
            <!-- 首页 -->
            <li>
                <a href="./index.html">
                    <i class="iconfont icon-shouye-xianxing"></i><span>首页</span>
                </a>
            </li>
            <!-- 分类 -->
            <li>
                <a href="./classify.html">
                    <i class="iconfont icon-fenleiorguangchangorqita"></i><span>分类</span>
                </a>
            </li>
            <!-- 发现 -->
            <li>
                <a href="./find.html">
                    <i class="iconfont icon-faxian"></i><span>发现</span>
                </a>
            </li>
            <!-- 我的 -->
            <li>
                <a href="./me.html">
                    <i class="iconfont icon-wode"></i><span>我的</span>
                </a>
            </li>
        </ul>
    </footer>
</body>

</html>